<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
		<title>Graph drawer</title> 
		<meta charset="utf-8"> 
		
		<meta name="keywords" content="mathematical graph, graph theory, drawing, nice drawing, force-based, approach, algorithm, javascript, layout">
		<meta name="description" content="Graph drawer is a tool for drawing Mathematical graphs. You define the graph by number of vertices and by edges between them.">
		<!--<meta name="viewport" content="user-scalable=no, width=device-width" />-->
		
		
		<link rel="stylesheet" type="text/css" href="Graph%20drawer_files/style.css">
		
		<script async="" src="Graph%20drawer_files/cbgapi.loaded_0"></script><script gapi_processed="true" src="Graph%20drawer_files/plusone.js" async="" type="text/javascript"></script><script src="Graph%20drawer_files/ga.js" async="" type="text/javascript"></script><script type="text/javascript" src="Graph%20drawer_files/Point.js"></script> 
		<script type="text/javascript" src="Graph%20drawer_files/Vertex.js"></script> 
		<script type="text/javascript" src="Graph%20drawer_files/Grapher2D.js"></script> 
		<script type="text/javascript" src="Graph%20drawer_files/Graph.js"></script> 
		<script type="text/javascript" src="Graph%20drawer_files/Control.js"></script>
		<script type="text/javascript" src="Graph%20drawer_files/slider.js"></script>
		
		
		<script type="text/javascript">		
		
			// Google Analytics
		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-4249565-13']);
		  _gaq.push(['_trackPageview']);
		  (function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();	
		</script>

	</head> 
	
	<body onload="onLoad()"> 
		
		<h1 style="position:absolute">Graph drawer</h1>
		
		<div class="sidebar">
			<h3>Controls</h3>
			
			<div id="repSL" class="slider">	<div style="left: 0px;" class="handle control">repulsion</div></div>
			<div id="attSL" class="slider">	<div style="left: 81px;" class="handle control">attraction</div></div>
			
			<div class="checkers">
				<div class="cb">
					<input checked="checked" onclick="changePhysics();" id="phBTN" type="checkbox">
					<label for="phBTN">physics</label>
					<br>
					<input checked="checked" onclick="change3D(this);" id="tdBTN" type="checkbox">
					<label for="tdBTN">3D mode</label>
					<br>
					<input checked="checked" onclick="changeLabels();" id="lbBTN" type="checkbox">
					<label for="lbBTN">show labels</label>
				</div>
			</div>
			
			
			<input value="Greedy coloring" onclick="minColoring(this);" class="btn control" style="font-size:15;" type="submit">
			<!--<div id="damSL" class="slider">	<div class="handle">damping</div></div>-->
			
			<h3>Share it</h3>
			<a href="http://www.facebook.com/sharer.php?u=http://g.ivank.net&amp;t=Graph%20drawer" target="_new">
				<img src="Graph%20drawer_files/fb.png" alt="Share on Facebook" title="Share on Facebook">
			</a>
			<!--
			<a href="http://plus.google.com" target="_new">
				<img src="img/gg.png" alt="Chrome App" title="Chrome App" />
			</a>
			-->
			<!-- Place this tag where you want the +1 button to render. -->
			<div id="___plusone_0" style="height: 60px; width: 50px; display: inline-block; text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline;"><iframe title="+1" data-gapiattached="true" allowtransparency="true" src="Graph%20drawer_files/fastbutton.htm" name="I0_1357499735726" id="I0_1357499735726" vspace="0" tabindex="0" style="position: static; top: 0px; width: 50px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 60px;" marginwidth="0" marginheight="0" hspace="0" frameborder="0" scrolling="no" width="100%"></iframe></div>
			<!-- Place this tag after the last +1 button tag. -->
			<script type="text/javascript">
			  (function() {
				var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
				po.src = 'https://apis.google.com/js/plusone.js';
				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
			  })();
			</script>
			
			
			<a href="http://twitter.com/home?status=Just%20discovered%20this%20web%20app%20http://g.ivank.net" title="Share on Twitter" target="_new">
				<img src="Graph%20drawer_files/tw.png" alt="Share on Twitter" title="Share on Twitter">
			</a>
		

			<input value="Embed Code" onclick="getEmbedCode();" class="btn control" type="submit">
			<input value="Get Tiny URL" onclick="getTinyURL();" class="btn control" type="submit">
			<iframe id="URLcont" style="border:none;" height="55" width="100%"></iframe>
		</div>
	
		
		<svg id="svgc" style="width:100%; height:460px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
		<line y2="324.9429659760451" x2="524.3214671435999" y1="316.6094433344552" x1="580.538714456284" style="stroke:#777;stroke-width:3"></line><line y2="359.15481480640824" x2="508.92450542815817" y1="324.9429659760451" x1="524.3214671435999" style="stroke:#777;stroke-width:3"></line><line y2="390.82560899077396" x2="552.2112744983243" y1="359.15481480640824" x1="508.92450542815817" style="stroke:#777;stroke-width:3"></line><line y2="381.61567480358406" x2="605.7596458281296" y1="390.82560899077396" x1="552.2112744983243" style="stroke:#777;stroke-width:3"></line><line y2="341.6569085669537" x2="619.9260717283678" y1="381.61567480358406" x1="605.7596458281296" style="stroke:#777;stroke-width:3"></line><line y2="316.6094433344552" x2="580.538714456284" y1="341.6569085669537" x1="619.9260717283678" style="stroke:#777;stroke-width:3"></line><line y2="308.35379167495773" x2="664.4323911096151" y1="341.6569085669537" x1="619.9260717283678" style="stroke:#777;stroke-width:3"></line><line y2="307.7159030391183" x2="687.745887598797" y1="308.35379167495773" x1="664.4323911096151" style="stroke:#777;stroke-width:3"></line><line y2="342.9990016272353" x2="684.9904119978174" y1="307.7159030391183" x1="687.745887598797" style="stroke:#777;stroke-width:3"></line><line y2="384.2183777499114" x2="637.5456710111271" y1="342.9990016272353" x1="684.9904119978174" style="stroke:#777;stroke-width:3"></line><line y2="381.61567480358406" x2="605.7596458281296" y1="384.2183777499114" x1="637.5456710111271" style="stroke:#777;stroke-width:3"></line><line y2="307.7159030391183" x2="687.745887598797" y1="308.35379167495773" x1="664.4323911096151" style="stroke:#777;stroke-width:3"></line><line y2="396.2536269828661" x2="604.2855716758612" y1="384.2183777499114" x1="637.5456710111271" style="stroke:#777;stroke-width:3"></line><line y2="400.3833164345191" x2="548.1386186958828" y1="396.2536269828661" x1="604.2855716758612" style="stroke:#777;stroke-width:3"></line><line y2="390.82560899077396" x2="552.2112744983243" y1="400.3833164345191" x1="548.1386186958828" style="stroke:#777;stroke-width:3"></line><line y2="270.34696489602527" x2="596.7473462931299" y1="316.6094433344552" x1="580.538714456284" style="stroke:#777;stroke-width:3"></line><line y2="264.4631512303311" x2="645.525283936037" y1="270.34696489602527" x1="596.7473462931299" style="stroke:#777;stroke-width:3"></line><line y2="308.35379167495773" x2="664.4323911096151" y1="264.4631512303311" x1="645.525283936037" style="stroke:#777;stroke-width:3"></line><line y2="338.07025955194774" x2="463.80339938782436" y1="359.15481480640824" x1="508.92450542815817" style="stroke:#777;stroke-width:3"></line><line y2="290.39286018963446" x2="453.85330972494324" y1="338.07025955194774" x1="463.80339938782436" style="stroke:#777;stroke-width:3"></line><line y2="284.5185706717994" x2="491.5006516948073" y1="290.39286018963446" x1="453.85330972494324" style="stroke:#777;stroke-width:3"></line><line y2="324.9429659760451" x2="524.3214671435999" y1="284.5185706717994" x1="491.5006516948073" style="stroke:#777;stroke-width:3"></line><line y2="314.4254216787411" x2="702.6124917989264" y1="342.9990016272353" x1="684.9904119978174" style="stroke:#777;stroke-width:3"></line><line y2="259.45683520576085" x2="719.2512314008864" y1="314.4254216787411" x1="702.6124917989264" style="stroke:#777;stroke-width:3"></line><line y2="258.5064377240723" x2="710.8567478920522" y1="259.45683520576085" x1="719.2512314008864" style="stroke:#777;stroke-width:3"></line><line y2="307.7159030391183" x2="687.745887598797" y1="258.5064377240723" x1="710.8567478920522" style="stroke:#777;stroke-width:3"></line><line y2="232.80468074682196" x2="511.6819594251677" y1="284.5185706717994" x1="491.5006516948073" style="stroke:#777;stroke-width:3"></line><line y2="226.98170441741414" x2="560.6863819436014" y1="232.80468074682196" x1="511.6819594251677" style="stroke:#777;stroke-width:3"></line><line y2="270.34696489602527" x2="596.7473462931299" y1="226.98170441741414" x1="560.6863819436014" style="stroke:#777;stroke-width:3"></line><line y2="338.07025955194774" x2="463.80339938782436" y1="344.9216267719542" x1="452.9457259934269" style="stroke:#777;stroke-width:3"></line><line y2="375.68454216263376" x2="494.05355910289666" y1="344.9216267719542" x1="452.9457259934269" style="stroke:#777;stroke-width:3"></line><line y2="400.3833164345191" x2="548.1386186958828" y1="375.68454216263376" x1="494.05355910289666" style="stroke:#777;stroke-width:3"></line><line y2="207.48986791018277" x2="694.0057599364405" y1="258.5064377240723" x1="710.8567478920522" style="stroke:#777;stroke-width:3"></line><line y2="212.68923181069002" x2="661.8384085858601" y1="207.48986791018277" x1="694.0057599364405" style="stroke:#777;stroke-width:3"></line><line y2="264.4631512303311" x2="645.525283936037" y1="212.68923181069002" x1="661.8384085858601" style="stroke:#777;stroke-width:3"></line><line y2="172.59977604799124" x2="628.8603036653221" y1="212.68923181069002" x1="661.8384085858601" style="stroke:#777;stroke-width:3"></line><line y2="180.99855090027503" x2="575.2455345910294" y1="172.59977604799124" x1="628.8603036653221" style="stroke:#777;stroke-width:3"></line><line y2="226.98170441741414" x2="560.6863819436014" y1="180.99855090027503" x1="575.2455345910294" style="stroke:#777;stroke-width:3"></line><line y2="324.1870818095011" x2="668.4467854789244" y1="314.4254216787411" x1="702.6124917989264" style="stroke:#777;stroke-width:3"></line><line y2="365.2557425511999" x2="618.5401662587449" y1="324.1870818095011" x1="668.4467854789244" style="stroke:#777;stroke-width:3"></line><line y2="396.2536269828661" x2="604.2855716758612" y1="365.2557425511999" x1="618.5401662587449" style="stroke:#777;stroke-width:3"></line><line y2="340.1329826501512" x2="569.0543800267592" y1="365.2557425511999" x1="618.5401662587449" style="stroke:#777;stroke-width:3"></line><line y2="346.52888569072354" x2="500.56294443099114" y1="340.1329826501512" x1="569.0543800267592" style="stroke:#777;stroke-width:3"></line><line y2="375.68454216263376" x2="494.05355910289666" y1="346.52888569072354" x1="500.56294443099114" style="stroke:#777;stroke-width:3"></line><line y2="280.2423984607764" x2="590.1869060599412" y1="340.1329826501512" x1="569.0543800267592" style="stroke:#777;stroke-width:3"></line><line y2="271.53991220053047" x2="653.5592701900712" y1="280.2423984607764" x1="590.1869060599412" style="stroke:#777;stroke-width:3"></line><line y2="324.1870818095011" x2="668.4467854789244" y1="271.53991220053047" x1="653.5592701900712" style="stroke:#777;stroke-width:3"></line><line y2="205.137095358438" x2="675.3049872494931" y1="271.53991220053047" x1="653.5592701900712" style="stroke:#777;stroke-width:3"></line><line y2="202.89822678168474" x2="706.6410187045398" y1="205.137095358438" x1="675.3049872494931" style="stroke:#777;stroke-width:3"></line><line y2="259.45683520576085" x2="719.2512314008864" y1="202.89822678168474" x1="706.6410187045398" style="stroke:#777;stroke-width:3"></line><line y2="154.58335157461067" x2="687.8832409876809" y1="202.89822678168474" x1="706.6410187045398" style="stroke:#777;stroke-width:3"></line><line y2="160.40618512314592" x2="682.2754114098867" y1="154.58335157461067" x1="687.8832409876809" style="stroke:#777;stroke-width:3"></line><line y2="207.48986791018277" x2="694.0057599364405" y1="160.40618512314592" x1="682.2754114098867" style="stroke:#777;stroke-width:3"></line><line y2="139.1597420862662" x2="639.9615153501201" y1="160.40618512314592" x1="682.2754114098867" style="stroke:#777;stroke-width:3"></line><line y2="172.59977604799124" x2="628.8603036653221" y1="139.1597420862662" x1="639.9615153501201" style="stroke:#777;stroke-width:3"></line><line y2="189.42294038053694" x2="494.67546153313793" y1="232.80468074682196" x1="511.6819594251677" style="stroke:#777;stroke-width:3"></line><line y2="156.57798229856584" x2="535.1144402704563" y1="189.42294038053694" x1="494.67546153313793" style="stroke:#777;stroke-width:3"></line><line y2="180.99855090027503" x2="575.2455345910294" y1="156.57798229856584" x1="535.1144402704563" style="stroke:#777;stroke-width:3"></line><line y2="117.63892250578982" x2="542.9689903561282" y1="156.57798229856584" x1="535.1144402704563" style="stroke:#777;stroke-width:3"></line><line y2="108.46347726679342" x2="594.42677959616" y1="117.63892250578982" x1="542.9689903561282" style="stroke:#777;stroke-width:3"></line><line y2="139.1597420862662" x2="639.9615153501201" y1="108.46347726679342" x1="594.42677959616" style="stroke:#777;stroke-width:3"></line><line y2="99.66200398799884" x2="593.7175199231264" y1="108.46347726679342" x1="594.42677959616" style="stroke:#777;stroke-width:3"></line><line y2="124.48810965620874" x2="644.8825124665009" y1="99.66200398799884" x1="593.7175199231264" style="stroke:#777;stroke-width:3"></line><line y2="154.58335157461067" x2="687.8832409876809" y1="124.48810965620874" x1="644.8825124665009" style="stroke:#777;stroke-width:3"></line><line y2="240.14892245011302" x2="431.76400164061977" y1="290.39286018963446" x1="453.85330972494324" style="stroke:#777;stroke-width:3"></line><line y2="190.86216275442402" x2="452.5374053555104" y1="240.14892245011302" x1="431.76400164061977" style="stroke:#777;stroke-width:3"></line><line y2="189.42294038053694" x2="494.67546153313793" y1="190.86216275442402" x1="452.5374053555104" style="stroke:#777;stroke-width:3"></line><line y2="115.36024651716727" x2="506.0757292462498" y1="117.63892250578982" x1="542.9689903561282" style="stroke:#777;stroke-width:3"></line><line y2="155.91563255413018" x2="455.83768720273827" y1="115.36024651716727" x1="506.0757292462498" style="stroke:#777;stroke-width:3"></line><line y2="190.86216275442402" x2="452.5374053555104" y1="155.91563255413018" x1="455.83768720273827" style="stroke:#777;stroke-width:3"></line><line y2="239.74583006903504" x2="420.1050695610388" y1="240.14892245011302" x1="431.76400164061977" style="stroke:#777;stroke-width:3"></line><line y2="296.851911245706" x2="431.2648147786623" y1="239.74583006903504" x1="420.1050695610388" style="stroke:#777;stroke-width:3"></line><line y2="344.9216267719542" x2="452.9457259934269" y1="296.851911245706" x1="431.2648147786623" style="stroke:#777;stroke-width:3"></line><line y2="295.0391735722201" x2="459.47674844067365" y1="296.851911245706" x1="431.2648147786623" style="stroke:#777;stroke-width:3"></line><line y2="346.52888569072354" x2="500.56294443099114" y1="295.0391735722201" x1="459.47674844067365" style="stroke:#777;stroke-width:3"></line><line y2="103.84542347770784" x2="536.2053719446669" y1="99.66200398799884" x1="593.7175199231264" style="stroke:#777;stroke-width:3"></line><line y2="115.36024651716727" x2="506.0757292462498" y1="103.84542347770784" x1="536.2053719446669" style="stroke:#777;stroke-width:3"></line><line y2="184.8235531776126" x2="435.70230673831884" y1="155.91563255413018" x1="455.83768720273827" style="stroke:#777;stroke-width:3"></line><line y2="239.74583006903504" x2="420.1050695610388" y1="184.8235531776126" x1="435.70230673831884" style="stroke:#777;stroke-width:3"></line><line y2="175.57897123190094" x2="467.1108310310524" y1="184.8235531776126" x1="435.70230673831884" style="stroke:#777;stroke-width:3"></line><line y2="228.56071487719007" x2="479.87077078012214" y1="175.57897123190094" x1="467.1108310310524" style="stroke:#777;stroke-width:3"></line><line y2="295.0391735722201" x2="459.47674844067365" y1="228.56071487719007" x1="479.87077078012214" style="stroke:#777;stroke-width:3"></line><line y2="175.57897123190094" x2="467.1108310310524" y1="134.8873091197965" x1="517.701115709642" style="stroke:#777;stroke-width:3"></line><line y2="220.0746123660693" x2="542.0951202963156" y1="280.2423984607764" x1="590.1869060599412" style="stroke:#777;stroke-width:3"></line><line y2="220.0746123660693" x2="542.0951202963156" y1="228.56071487719007" x1="479.87077078012214" style="stroke:#777;stroke-width:3"></line><line y2="103.84542347770784" x2="536.2053719446669" y1="134.8873091197965" x1="517.701115709642" style="stroke:#777;stroke-width:3"></line><line y2="160.26898396747043" x2="564.8119780359914" y1="220.0746123660693" x1="542.0951202963156" style="stroke:#777;stroke-width:3"></line><line y2="153.89059721908984" x2="634.6124632196344" y1="160.26898396747043" x1="564.8119780359914" style="stroke:#777;stroke-width:3"></line><line y2="205.137095358438" x2="675.3049872494931" y1="153.89059721908984" x1="634.6124632196344" style="stroke:#777;stroke-width:3"></line><line y2="134.8873091197965" x2="517.701115709642" y1="160.26898396747043" x1="564.8119780359914" style="stroke:#777;stroke-width:3"></line><line y2="124.48810965620874" x2="644.8825124665009" y1="153.89059721908984" x1="634.6124632196344" style="stroke:#777;stroke-width:3"></line><circle r="9.639204288925136" cy="316.6094433344552" cx="580.538714456284" style="cursor:move;" fill="#E30613"></circle><text y="322.6094433344552" x="575.538714456284" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">1</text><circle r="9.81974909058385" cy="324.9429659760451" cx="524.3214671435999" style="cursor:move;" fill="#008ef1"></circle><text y="330.9429659760451" x="519.3214671435999" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">2</text><circle r="10.297503848286766" cy="359.15481480640824" cx="508.92450542815817" style="cursor:move;" fill="#E30613"></circle><text y="365.15481480640824" x="503.92450542815817" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">3</text><circle r="10.657186370209734" cy="390.82560899077396" cx="552.2112744983243" style="cursor:move;" fill="#008ef1"></circle><text y="396.82560899077396" x="547.2112744983243" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">4</text><circle r="10.456981899526284" cy="381.61567480358406" cx="605.7596458281296" style="cursor:move;" fill="#E30613"></circle><text y="387.61567480358406" x="600.7596458281296" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">5</text><circle r="9.936422930818615" cy="341.6569085669537" cx="619.9260717283678" style="cursor:move;" fill="#008ef1"></circle><text y="347.6569085669537" x="614.9260717283678" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">6</text><circle r="9.976957959798906" cy="308.35379167495773" cx="664.4323911096151" style="cursor:move;" fill="#E30613"></circle><text y="314.35379167495773" x="659.4323911096151" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">7</text><circle r="10.302034587447826" cy="307.7159030391183" cx="687.745887598797" style="cursor:move;" fill="#008ef1"></circle><text y="313.7159030391183" x="682.745887598797" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">8</text><circle r="10.900074170507768" cy="342.9990016272353" cx="684.9904119978174" style="cursor:move;" fill="#E30613"></circle><text y="348.9990016272353" x="679.9904119978174" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">9</text><circle r="10.963008877967326" cy="384.2183777499114" cx="637.5456710111271" style="cursor:move;" fill="#008ef1"></circle><text y="390.2183777499114" x="627.5456710111271" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">10</text><circle r="11.57702159713992" cy="396.2536269828661" cx="604.2855716758612" style="cursor:move;" fill="#E30613"></circle><text y="402.2536269828661" x="594.2855716758612" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">11</text><circle r="11.357585952573595" cy="400.3833164345191" cx="548.1386186958828" style="cursor:move;" fill="#f1b900"></circle><text y="406.3833164345191" x="538.1386186958828" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">12</text><circle r="9.464056603453738" cy="270.34696489602527" cx="596.7473462931299" style="cursor:move;" fill="#f1b900"></circle><text y="276.34696489602527" x="586.7473462931299" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">13</text><circle r="9.638098241278334" cy="264.4631512303311" cx="645.525283936037" style="cursor:move;" fill="#008ef1"></circle><text y="270.4631512303311" x="635.525283936037" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">14</text><circle r="10.610001451160043" cy="338.07025955194774" cx="463.80339938782436" style="cursor:move;" fill="#f1b900"></circle><text y="344.07025955194774" x="453.80339938782436" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">15</text><circle r="10.281994436159989" cy="290.39286018963446" cx="453.85330972494324" style="cursor:move;" fill="#E30613"></circle><text y="296.39286018963446" x="443.85330972494324" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">16</text><circle r="9.80683288038233" cy="284.5185706717994" cx="491.5006516948073" style="cursor:move;" fill="#f1b900"></circle><text y="290.5185706717994" x="481.5006516948073" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">17</text><circle r="11.502612415661613" cy="314.4254216787411" cx="702.6124917989264" style="cursor:move;" fill="#f1b900"></circle><text y="320.4254216787411" x="692.6124917989264" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">18</text><circle r="11.254059285147761" cy="259.45683520576085" cx="719.2512314008864" style="cursor:move;" fill="#008ef1"></circle><text y="265.45683520576085" x="709.2512314008864" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">19</text><circle r="10.542053346120529" cy="258.5064377240723" cx="710.8567478920522" style="cursor:move;" fill="#E30613"></circle><text y="264.5064377240723" x="700.8567478920522" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">20</text><circle r="9.605088879626683" cy="232.80468074682196" cx="511.6819594251677" style="cursor:move;" fill="#E30613"></circle><text y="238.80468074682196" x="501.6819594251677" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">21</text><circle r="9.443144704398799" cy="226.98170441741414" cx="560.6863819436014" style="cursor:move;" fill="#008ef1"></circle><text y="232.98170441741414" x="550.6863819436014" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">22</text><circle r="11.397852844797498" cy="344.9216267719542" cx="452.9457259934269" style="cursor:move;" fill="#008ef1"></circle><text y="350.9216267719542" x="442.9457259934269" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">23</text><circle r="11.792358304871847" cy="375.68454216263376" cx="494.05355910289666" style="cursor:move;" fill="#E30613"></circle><text y="381.68454216263376" x="484.05355910289666" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">24</text><circle r="10.22172994532218" cy="207.48986791018277" cx="694.0057599364405" style="cursor:move;" fill="#008ef1"></circle><text y="213.48986791018277" x="684.0057599364405" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">25</text><circle r="9.780453662649228" cy="212.68923181069002" cx="661.8384085858601" style="cursor:move;" fill="#E30613"></circle><text y="218.68923181069002" x="651.8384085858601" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">26</text><circle r="9.769608462359583" cy="172.59977604799124" cx="628.8603036653221" style="cursor:move;" fill="#008ef1"></circle><text y="178.59977604799124" x="618.8603036653221" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">27</text><circle r="9.588755344567302" cy="180.99855090027503" cx="575.2455345910294" style="cursor:move;" fill="#f1b900"></circle><text y="186.99855090027503" x="565.2455345910294" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">28</text><circle r="12.27998188218973" cy="324.1870818095011" cx="668.4467854789244" style="cursor:move;" fill="#E30613"></circle><text y="330.1870818095011" x="658.4467854789244" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">29</text><circle r="12.313417817877655" cy="365.2557425511999" cx="618.5401662587449" style="cursor:move;" fill="#008ef1"></circle><text y="371.2557425511999" x="608.5401662587449" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">30</text><circle r="12.779506076668902" cy="340.1329826501512" cx="569.0543800267592" style="cursor:move;" fill="#E30613"></circle><text y="346.1329826501512" x="559.0543800267592" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">31</text><circle r="12.475202579225051" cy="346.52888569072354" cx="500.56294443099114" style="cursor:move;" fill="#008ef1"></circle><text y="352.52888569072354" x="490.56294443099114" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">32</text><circle r="13.059395093282243" cy="280.2423984607764" cx="590.1869060599412" style="cursor:move;" fill="#f1b900"></circle><text y="286.2423984607764" x="580.1869060599412" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">33</text><circle r="12.73697435197875" cy="271.53991220053047" cx="653.5592701900712" style="cursor:move;" fill="#008ef1"></circle><text y="277.53991220053047" x="643.5592701900712" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">34</text><circle r="12.398802716298636" cy="205.137095358438" cx="675.3049872494931" style="cursor:move;" fill="#E30613"></circle><text y="211.137095358438" x="665.3049872494931" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">35</text><circle r="11.696746331509194" cy="202.89822678168474" cx="706.6410187045398" style="cursor:move;" fill="#f1b900"></circle><text y="208.89822678168474" x="696.6410187045398" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">36</text><circle r="11.31367686647074" cy="154.58335157461067" cx="687.8832409876809" style="cursor:move;" fill="#E30613"></circle><text y="160.58335157461067" x="677.8832409876809" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">37</text><circle r="10.537166907530972" cy="160.40618512314592" cx="682.2754114098867" style="cursor:move;" fill="#f1b900"></circle><text y="166.40618512314592" x="672.2754114098867" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">38</text><circle r="10.22941867587466" cy="139.1597420862662" cx="639.9615153501201" style="cursor:move;" fill="#E30613"></circle><text y="145.1597420862662" x="629.9615153501201" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">39</text><circle r="9.869984848380737" cy="189.42294038053694" cx="494.67546153313793" style="cursor:move;" fill="#008ef1"></circle><text y="195.42294038053694" x="484.67546153313793" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">40</text><circle r="9.859944954561472" cy="156.57798229856584" cx="535.1144402704563" style="cursor:move;" fill="#E30613"></circle><text y="162.57798229856584" x="525.1144402704563" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">41</text><circle r="10.391514989043648" cy="117.63892250578982" cx="542.9689903561282" style="cursor:move;" fill="#008ef1"></circle><text y="123.63892250578982" x="532.9689903561282" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">42</text><circle r="10.582700495962657" cy="108.46347726679342" cx="594.42677959616" style="cursor:move;" fill="#f1b900"></circle><text y="114.46347726679342" x="584.42677959616" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">43</text><circle r="11.27956971298287" cy="99.66200398799884" cx="593.7175199231264" style="cursor:move;" fill="#E30613"></circle><text y="105.66200398799884" x="583.7175199231264" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">44</text><circle r="11.70698844438341" cy="124.48810965620874" cx="644.8825124665009" style="cursor:move;" fill="#008ef1"></circle><text y="130.48810965620874" x="634.8825124665009" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">45</text><circle r="10.62635723176528" cy="240.14892245011302" cx="431.76400164061977" style="cursor:move;" fill="#008ef1"></circle><text y="246.14892245011302" x="421.76400164061977" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">46</text><circle r="10.414291572677254" cy="190.86216275442402" cx="452.5374053555104" style="cursor:move;" fill="#E30613"></circle><text y="196.86216275442402" x="442.5374053555104" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">47</text><circle r="10.932011760952586" cy="115.36024651716727" cx="506.0757292462498" style="cursor:move;" fill="#E30613"></circle><text y="121.36024651716727" x="496.0757292462498" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">48</text><circle r="10.945178557979897" cy="155.91563255413018" cx="455.83768720273827" style="cursor:move;" fill="#f1b900"></circle><text y="161.91563255413018" x="445.83768720273827" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">49</text><circle r="11.329820511801534" cy="239.74583006903504" cx="420.1050695610388" style="cursor:move;" fill="#E30613"></circle><text y="245.74583006903504" x="410.1050695610388" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">50</text><circle r="11.778211291042117" cy="296.851911245706" cx="431.2648147786623" style="cursor:move;" fill="#f1b900"></circle><text y="302.851911245706" x="421.2648147786623" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">51</text><circle r="12.46777998639522" cy="295.0391735722201" cx="459.47674844067365" style="cursor:move;" fill="#E30613"></circle><text y="301.0391735722201" x="449.47674844067365" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">52</text><circle r="11.523434424872537" cy="103.84542347770784" cx="536.2053719446669" style="cursor:move;" fill="#008ef1"></circle><text y="109.84542347770784" x="526.2053719446669" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">53</text><circle r="11.551777073441105" cy="184.8235531776126" cx="435.70230673831884" style="cursor:move;" fill="#008ef1"></circle><text y="190.8235531776126" x="425.70230673831884" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">54</text><circle r="12.297716043700241" cy="175.57897123190094" cx="467.1108310310524" style="cursor:move;" fill="#E30613"></circle><text y="181.57897123190094" x="457.1108310310524" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">55</text><circle r="12.76827457858125" cy="228.56071487719007" cx="479.87077078012214" style="cursor:move;" fill="#008ef1"></circle><text y="234.56071487719007" x="469.87077078012214" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">56</text><circle r="12.737334841869352" cy="160.26898396747043" cx="564.8119780359914" style="cursor:move;" fill="#008ef1"></circle><text y="166.26898396747043" x="554.8119780359914" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">57</text><circle r="12.281614078336114" cy="134.8873091197965" cx="517.701115709642" style="cursor:move;" fill="#f1b900"></circle><text y="140.8873091197965" x="507.70111570964195" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">58</text><circle r="12.401880057832567" cy="153.89059721908984" cx="634.6124632196344" style="cursor:move;" fill="#f1b900"></circle><text y="159.89059721908984" x="624.6124632196344" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">59</text><circle r="13.05613857949944" cy="220.0746123660693" cx="542.0951202963156" style="cursor:move;" fill="#E30613"></circle><text y="226.0746123660693" x="532.0951202963156" style="pointer-events: none; visibility: visible;" font-size="18" fill="#fff">60</text></svg>
		
		<div id="inPanel" style="margin-bottom:15px;">
			<input value="60:1-2,2-3,3-4,4-5,5-6,6-1,6-7,7-8,8-9,9-10,10-5,7-8,10-11,11-12,12-4,1-13,13-14,14-7,3-15,15-16,16-17,17-2,9-18,18-19,19-20,20-8,17-21,21-22,22-13,23-15,23-24,24-12,20-25,25-26,26-14,26-27,27-28,28-22,18-29,29-30,30-11,30-31,31-32,32-24,31-33,33-34,34-29,34-35,35-36,36-19,36-37,37-38,38-25,38-39,39-27,21-40,40-41,41-28,41-42,42-43,43-39,43-44,44-45,45-37,16-46,46-47,47-40,42-48,48-49,49-47,46-50,50-51,51-23,51-52,52-32,44-53,53-48,49-54,54-50,54-55,55-56,56-52,58-55,33-60,56-60,58-53,60-57,57-59,59-35,57-58,59-45" maxlength="2048" id="inText" type="text">
			<input value="Draw" onclick="rebuildURL();" class="btn control" style="font-size:18px;" type="submit">
		</div>

		<h2>Examples</h2>

<div id="graphs">
	
		<a href="#2:1-2">Stick</a>
	
		<a href="#3:1-2,2-3,3-1">Triangle</a>
	
		<a href="#8:1-2,2-3,3-4,4-5,5-6,6-7,7-8,8-1">Ring C<sub>8</sub></a>
	
		<a href="#4:1-2,2-3,3-1,1-4,2-4,3-4">Tetrahedron</a>
		
		<a href="#8:1-2,2-3,3-4,4-1,5-6,6-7,7-8,8-5,1-5,2-6,3-7,4-8">Cube</a>
		
		<a href="#6:1-2,2-3,3-4,4-1,1-5,2-5,3-5,4-5,1-6,2-6,3-6,4-6">Octahedron</a>
		
		<a href="#12:1-2,2-3,3-4,4-5,5-1,6-7,7-8,8-9,9-10,10-6,1-11,2-11,3-11,4-11,5-11,6-12,7-12,8-12,9-12,10-12,1-6,6-2,2-7,7-3,3-8,8-4,4-9,9-5,5-10,10-1">Icosahedron</a>
	
		<a href="#20:1-2,2-3,3-4,4-5,5-1,6-7,7-8,8-9,9-10,10-6,1-11,2-12,3-13,4-14,5-15,6-16,7-17,8-18,9-19,10-20,11-16,16-12,12-17,17-13,13-18,18-14,14-19,19-15,15-20,20-11">Dodecahedron</a>
	
		<a href="#11:1-2,2-3,3-4,4-5,5-1,6-7,7-8,8-9,9-10,10-6,11-1,11-2,11-3,11-4,11-5,11-6,11-7,11-8,11-9,11-10">Diabolo</a>
		
		<a href="#7:1-2,2-3,3-4,4-5,5-6,6-1,1-7,2-7,3-7,4-7,5-7,6-7,2-4,4-6,6-2">Fano plane</a>
		
		<a href="#16:1-2,2-3,3-4,4-1,5-6,6-7,7-8,8-5,1-5,2-6,3-7,4-8,9-10,10-11,11-12,12-9,13-14,14-15,15-16,16-13,9-13,10-14,11-15,12-16,1-9,2-10,3-11,4-12,5-13,6-14,7-15,8-16">4D Cube</a>
		
		<a href="#18:1-2,2-3,3-4,4-5,5-6,6-1,1-7,7-2,2-8,8-3,3-9,9-4,4-10,10-5,5-11,11-6,6-12,12-1,7-8,8-9,9-10,10-11,11-12,12-7,13-14,14-15,15-16,16-17,17-18,18-13,1-13,13-2,2-14,14-3,3-15,15-4,4-16,16-5,5-17,17-6,6-18,18-1">Drum</a>
		
		<a href="#12:1-2,2-3,3-4,4-5,5-6,6-1,1-7,2-8,3-9,4-10,5-11,6-12">Benzene</a>
		
		<a href="#18:1-2,2-3,3-4,4-5,5-6,6-1,1-7,2-8,3-9,4-10,5-11,6-12,1-13,2-14,3-15,4-16,5-17,6-18">Cyclohexane</a>
		
		<a href="#5:1-2,1-3,1-4,1-5">Methane</a>
		
		<a href="#60:1-2,2-3,3-4,4-5,5-6,6-1,6-7,7-8,8-9,9-10,10-5,7-8,10-11,11-12,12-4,1-13,13-14,14-7,3-15,15-16,16-17,17-2,9-18,18-19,19-20,20-8,17-21,21-22,22-13,23-15,23-24,24-12,20-25,25-26,26-14,26-27,27-28,28-22,18-29,29-30,30-11,30-31,31-32,32-24,31-33,33-34,34-29,34-35,35-36,36-19,36-37,37-38,38-25,38-39,39-27,21-40,40-41,41-28,41-42,42-43,43-39,43-44,44-45,45-37,16-46,46-47,47-40,42-48,48-49,49-47,46-50,50-51,51-23,51-52,52-32,44-53,53-48,49-54,54-50,54-55,55-56,56-52,58-55,33-60,56-60,58-53,60-57,57-59,59-35,57-58,59-45">Fulleren C<sub>60</sub></a>
		
		<a href="#16:1-2,2-3,4-5,5-6,7-8,8-9,1-4,4-7,2-5,5-8,3-6,6-9,3-10,6-11,9-12,9-14,8-15,7-16,10-11,11-12,12-13,13-14,14-15,15-16">Grid 4x4</a>
		
		<a href="#64:1-2,1-5,1-17,2-3,2-6,2-18,3-4,3-7,3-19,4-8,4-20,5-6,5-9,5-21,6-7,6-10,6-22,7-8,7-11,7-23,8-12,8-24,9-10,9-13,9-25,10-11,10-14,10-26,11-12,11-15,11-27,12-16,12-28,13-14,13-29,14-15,14-30,15-16,15-31,16-32,17-18,17-21,17-33,18-19,18-22,18-34,19-20,19-23,19-35,20-24,20-36,21-22,21-25,21-37,22-23,22-26,22-38,23-24,23-27,23-39,24-28,24-40,25-26,25-29,25-41,26-27,26-30,26-42,27-28,27-31,27-43,28-32,28-44,29-30,29-45,30-31,30-46,31-32,31-47,32-48,33-34,33-37,33-49,34-35,34-38,34-50,35-36,35-39,35-51,36-40,36-52,37-38,37-41,37-53,38-39,38-42,38-54,39-40,39-43,39-55,40-44,40-56,41-42,41-45,41-57,42-43,42-46,42-58,43-44,43-47,43-59,44-48,44-60,45-46,45-61,46-47,46-62,47-48,47-63,48-64,49-50,49-53,50-51,50-54,51-52,51-55,52-56,53-54,53-57,54-55,54-58,55-56,55-59,56-60,57-58,57-61,58-59,58-62,59-60,59-63,60-64,61-62,62-63,63-64">Grid 4x4x4</a>

		<a href="#10:1-3,3-5,5-2,2-4,4-1,6-10,6-7,7-8,8-9,9-10,1-6,2-7,3-8,4-9,5-10">Petersen graph</a>
		
		<a href="#14:1-2,2-3,3-4,4-5,5-6,6-7,7-8,8-9,9-10,10-11,11-12,12-13,13-14,14-1,1-6,3-8,5-10,7-12,9-14,11-2,13-4">Heawood graph</a>
		
		<a href="#8:1-2,1-3,1-4,1-5,5-4,4-3,3-2,3-6,4-6,1-7,4-7,3-7,2-7,5-7,6-7,3-8,4-8,1-8">Spiky tetrahedron</a>
		
		<a href="#6:1-4,1-5,1-6,2-4,2-5,2-6,3-4,3-5,3-6">K<sub>3,3</sub></a>
		
		<a href="#5:1-2,1-3,1-4,1-5,2-3,2-4,2-5,3-4,3-5,4-5">K<sub>5</sub></a>
</div>

		<div style="width:600px; height:120px; display:none;" id="embed">
			<h2>Paste your graph into your webpage</h2>
			<div style="width:360px; float:left; text-align:left;">
			<textarea rows="5" cols="36" id="wCode">&lt;iframe src= 
"http://g.ivank.net/g.html#60:1-2,2-3,3-4,4-5,5-6,6-1,6-7,7-8,8-9,9-10,10-5,7-8,10-11,11-12,12-4,1-13,13-14,14-7,3-15,15-16,16-17,17-2,9-18,18-19,19-20,20-8,17-21,21-22,22-13,23-15,23-24,24-12,20-25,25-26,26-14,26-27,27-28,28-22,18-29,29-30,30-11,30-31,31-32,32-24,31-33,33-34,34-29,34-35,35-36,36-19,36-37,37-38,38-25,38-39,39-27,21-40,40-41,41-28,41-42,42-43,43-39,43-44,44-45,45-37,16-46,46-47,47-40,42-48,48-49,49-47,46-50,50-51,51-23,51-52,52-32,44-53,53-48,49-54,54-50,54-55,55-56,56-52,58-55,33-60,56-60,58-53,60-57,57-59,59-35,57-58,59-45"
 width="400" height="200" style= "border:none;"&gt;&lt;/iframe&gt;</textarea>
			</div>

			<div style="text-align:left;">
			<ul>
				<li>paste it anywhere in your HTML</li>
				<li>content is 8kB (smaller than images)</li>
				<li>it is interactive and fun to use</li>
			</ul>
			</div>
		</div>

		<br>

		<!--
		<p>Check out my JavaScript games! 
		<strong><a href="http://crazybugs.ivank.net" target="_new">Crazy Bugs</a></strong>
		and 
		<strong><a href="http://bigfish.ivank.net" target="_new">The Big Fish</a></strong>.</p>
		-->
		<p><a href="http://blog.ivank.net/force-based-graph-drawing-in-javascript.html">Article &amp; Discussion</a></p>
		<p>Copyright © 2011 - 2012, <a href="http://blog.ivank.net/">Ivan Kuckir</a></p>

	 
</body></html>